<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <link rel="stylesheet" href="/static/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <style>
        .layui-form-item{
            margin-top: 10px;
            margin-right: 30px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form layuimini-container">
    <div class="layui-form-item">
        <label class="layui-form-label ">文章标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入文章标题" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章摘要</label>
        <div class="layui-input-block">
            <input type="text" name="phone" placeholder="请输入文章摘要" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择分类:</label>
        <div class="layui-input-block">
            <select lay-verify="required">
                <option value="1" selected>腾讯游戏</option>
                <option value="2">腾讯端游</option>
                <option value="3">腾讯手游</option>
                <option value="4">主机游戏</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片上传:</label>
        <div id="zyupload" class="zyupload"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择分类:</label>
        <div class="layui-input-block">
            <select lay-verify="required">
                <option value="1" selected>腾讯游戏</option>
                <option value="2">腾讯端游</option>
                <option value="3">腾讯手游</option>
                <option value="4">主机游戏</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章内容:</label>

        <div id="editor" style="margin: 50px 0 50px 0">
            <p>文章内容</p>
        </div>
    </div>








    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">发布</button>
        </div>
    </div>
</div>

<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script>

    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });

    });
    layui.use(['layer', 'form', 'laydate','wangEditor'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        var wangEditor = layui.wangEditor;

        var editor = new wangEditor('#editor');
        editor.customConfig.uploadImgServer = "../api/upload.json";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgHooks = {
            // 上传超时
            timeout: function (xhr, editor) {
                layer.msg('上传超时！')
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            customInsert: function (insertImg, result, editor) {
                console.log(result);
                if (result.code == 1) {
                    var url = result.data.url;
                    url.forEach(function (e) {
                        insertImg(e);
                    })
                } else {
                    layer.msg(result.msg);
                }
            }
        };
        editor.customConfig.customAlert = function (info) {
            layer.msg(info);
        };
        editor.create();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                type:'POST',
                url:'/admin/user_list/updateData',
                dataType:'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:data.field,
                success:function(data){
                    console.log(data)
                    if(data.status == 1){
                        layer.alert(data.message,{icon:6},function(){
                            parent.location.reload(true);
                        });
                    }else{
                        layer.alert(data.message,{icon:5});
                    }
                },
                error:function(){
                    //错误信息
                }

            });
            return false;
        });


        //全选被选中  其他都被勾选
        form.on('checkbox(checkall)', function (data) {
            var id = data.value;
            // console.log(id)
            //这里实现勾选
            var checkone = '.'+'checkone'+id
            $(checkone).each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('checkbox', function (data) {
            var myaaa = document.getElementsByName("center_permit[]")
            var s = '';
            if (data.value == 0 && $("#c_all").is(":checked")) {
                s = 0 + ',';
            } else if ($("#c_all").is(":checked")) {
                s = 0 + ',';
            } else {
                for (var i = 0; i < myaaa.length; i++) {
                    if (myaaa[i].checked) s += myaaa[i].value + ',';
                }
            }
            $("#doorNum").attr("value", s.slice(0, s.length - 1))

        });


    });
</script>
</body>
</html>